import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {AddressCascade} from "../../../../packages";
import {Tag} from 'antd';

export const demo1 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="基本用法">
      <AddressCascade
        width={200}
        v-model:province={state.formData.province}
        v-model:city={state.formData.city}
        v-model:district={state.formData.district}
      />
      <Tag>
        {[
          state.formData.province,
          state.formData.city,
          state.formData.district
        ].filter(Boolean).join(',') || 'EMPTY'}
      </Tag>
    </DemoRow>
  );
});
export const demo2 = designPage(() => {

  const state = reactive({
    formData: {
      province: '620000',
      city: '620100',
      district: '620101',
    } as any
  });

  return () => (
    <DemoRow title="带初始值">
      <AddressCascade
        width={200}
        v-model:province={state.formData.province}
        v-model:city={state.formData.city}
        v-model:district={state.formData.district}
      />
      <Tag>
        {[
          state.formData.province,
          state.formData.city,
          state.formData.district
        ].filter(Boolean).join(',') || 'EMPTY'}
      </Tag>
    </DemoRow>
  );
});


export const demo3 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="选择省">
      <AddressCascade
        width={200}
        v-model:province={state.formData.province}
        types="p"
      />
      <Tag>
        {[
          state.formData.province,
        ].filter(Boolean).join(',') || 'EMPTY'}
      </Tag>
    </DemoRow>
  );
});


export const demo4 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="选择省市">
      <AddressCascade
        width={200}
        v-model:province={state.formData.province}
        v-model:city={state.formData.city}
        types="pc"
      />
      <Tag>
        {[
          state.formData.province,
          state.formData.city,
        ].filter(Boolean).join(',') || 'EMPTY'}
      </Tag>
    </DemoRow>
  );
});

export const demo5_1 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="多选：省">
      <AddressCascade width={200} v-model={state.formData.addressCodes} types="p" multiple/>
      {JSON.stringify(state.formData.addressCodes)}
    </DemoRow>
  );
});

export const demo5 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="多选：省市县">
      <AddressCascade width={200} v-model={state.formData.addressCodes} multiple/>
      {JSON.stringify(state.formData.addressCodes)}
    </DemoRow>
  );
});
